<template>
  <div>
    <el-card>
      <el-table border loading="loading" :data="skuList">
        <el-table-column
          label="序号"
          type="index"
          align="center"
          width="80"
        ></el-table-column>
        <el-table-column
          label="名称"
          prop="skuName"
          align="center"
        ></el-table-column>
        <el-table-column
          label="描述"
          prop="skuDesc"
          align="center"
        ></el-table-column>
        <el-table-column label="默认图片" align="center">
          <template v-slot="{ row }">
            <el-image :src="row.skuDefaultImg"></el-image>
          </template>
        </el-table-column>
        <el-table-column
          label="重量"
          prop="weight"
          align="center"
        ></el-table-column>
        <el-table-column
          label="价格"
          prop="price"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" width="230" align="center">
          <template v-slot="{ row, $index }">
            <el-tooltip
              v-if="row.isSale === 0"
              effect="dark"
              content="上架"
              placement="top"
            >
              <el-button
                :icon="Top"
                type="success"
                size="small"
                @click="onSaleSkuInfo(row)"
              ></el-button>
            </el-tooltip>
            <el-tooltip v-else effect="dark" content="下架" placement="top">
              <el-button
                :icon="Bottom"
                type="info"
                size="small"
                @click="cancelSaleSkuInfo(row)"
              ></el-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="修改SKU" placement="top">
              <el-button :icon="Edit" type="primary" size="small"></el-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="查看详情" placement="top">
              <el-button
                :icon="InfoFilled"
                type="info"
                size="small"
                @click="checkSkuInfo(row)"
              ></el-button>
            </el-tooltip>
            <el-popconfirm
              confirm-button-text="确认"
              cancel-button-text="取消"
              :icon="InfoFilled"
              icon-color="orange"
              title="确定要删除此属性吗?"
              @confirm="deleteSkuInfo(row.id)"
            >
              <template #reference>
                <el-button
                  title="删除"
                  size="small"
                  type="danger"
                  :icon="Delete"
                />
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        style="margin-top: 15px"
        v-model:currentPage="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[7, 10, 15, 20]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout=" prev, pager, next, jumper, ->, sizes,total "
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <!-- 抽屉展示 -->
      <el-drawer
        v-model="isCheckSku"
        title="商品详细信息"
        :direction="direction"
        size="50%"
      >
        <el-row :gutter="10">
          <el-col :span="6" ><h4>商品名称</h4></el-col>
          <el-col :span="18">
            <p>{{ skuInfo.skuName }}</p>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="6"><h4>商品描述</h4></el-col>
          <el-col :span="18">
            <p>{{ skuInfo.skuDesc }}</p>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="6"><h4>商品价格</h4></el-col>
          <el-col :span="18">
            <p>{{ skuInfo.price }}</p>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="6"><h4>商品属性</h4></el-col>
          <el-col :span="18">
            <el-tag v-for="attr in skuInfo.skuAttrValueList" :key="attr.id" style="margin-right:6px">{{
              attr.attrName + "-" + attr.valueName
            }}</el-tag>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="6"><h4>销售属性</h4></el-col>
          <el-col :span="18">
            <el-tag
              v-for="saleAttr in skuInfo.skuSaleAttrValueList"
              :key="saleAttr.id" style="margin-right:6px"
              >{{
                saleAttr.saleAttrName + "-" + saleAttr.saleAttrValueName
              }}</el-tag
            >
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="6"><h4>商品图片</h4></el-col>
          <el-col :span="18">
            <el-carousel :interval="2000" type="card" height="300px">
              <el-carousel-item v-for="item in skuInfo.skuImageList" :key="item.id">
                 <el-image :src="item.imgUrl" ></el-image>
              </el-carousel-item>
            </el-carousel>
          </el-col>
        </el-row>
      </el-drawer>
    </el-card>
  </div>
</template>

<script lang="ts">
export default {
  name: "Sku",
};
</script>

<script lang="ts" setup>
import { Top, Delete, Edit, Bottom, InfoFilled } from "@element-plus/icons-vue";
import { onMounted, ref } from "vue";
import { ElMessage } from "element-plus";
import {
  reqGetAllSkuList,
  reqGetOnSaleSkuInfo,
  reqGetCancelSaleSkuInfo,
  reqDelSkuInfo,
  reqGetOneSkuInfo,
} from "@/api/product/sku";
const currentPage = ref<number>(1); //默认是第一页
const pageSize = ref<number>(7); //默认三条
const total = ref(0);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
// 单击当前页码实现分页
const handleCurrentChange = (val: number) => {
  // console.log(`current page: ${val}`);
  currentPage.value = val;
  getAllSkuList();
};
// 修改每页显示的条数
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  currentPage.value = 1;
  getAllSkuList();
};

const getAllSkuList = async () => {
  loading.value = true;
  const result = await reqGetAllSkuList(currentPage.value, pageSize.value);
  console.log(result);
  loading.value = false;
  skuList.value = result.records;
  total.value = result.total;
};
// 一挂载就请求数据
const loading = ref(false);
const skuList = ref([]);
onMounted(() => {
  getAllSkuList();
});

// 上架商品
const onSaleSkuInfo = async (row) => {
  await reqGetOnSaleSkuInfo(row.id);
  ElMessage.success("商品上架成功");
  row.isSale = 1 - row.isSale;
};

// 下架商品
const cancelSaleSkuInfo = async (row) => {
  await reqGetCancelSaleSkuInfo(row.id);
  ElMessage.success("商品下架成功");
  row.isSale = 1 - row.isSale;
};

// 删除某一个属性
const deleteSkuInfo = async (id: number) => {
  await reqDelSkuInfo(id);
  ElMessage.success("商品删除成功");
  getAllSkuList();
};

// 展示某个销售属性
const isCheckSku = ref(false);
const skuInfo = ref({});
const checkSkuInfo = async (row: any) => {
  isCheckSku.value = true;
  const result = await reqGetOneSkuInfo(row.id);
  console.log(result);
  skuInfo.value = result;
};
</script>
<style scoped>
.el-row .el-col h4{
 
}
</style>